<template>
  <view class="msg-1">
    <view >
      <text>选择入园日期</text>
    </view>
    <view class ="msg-1-1">
      <text >2024.09</text>
    </view>
  </view>
  <view class = "msg01" >
    <view class ="msg02">
      <view class = "msg02-1"  hover-class="msg02-2">
        <text class="text1"> 周日</text>
        <text class="text2">01</text>
      </view>
      <view class ="msg02-1" hover-class="msg02-2">
        <text class="text1"> 周一</text>
        <text class="text2">02</text>
      </view>
      <view class ="msg02-1" hover-class="msg02-2">
        <text class="text1"> 周二</text>
        <text class="text2">03</text>
      </view>
      <view class ="msg02-1" hover-class="msg02-2">
        <text class="text1"> 周三</text>
        <text class="text2">04</text>
      </view>
      <view class ="msg02-1" hover-class="msg02-2">
        <text class="text1"> 周四</text>
        <text class="text2">05</text>
      </view>
      <view class ="msg02-1" hover-class="msg02-2">
        <text class="text1"> 周五</text>
        <text class="text2">06</text>
      </view>
      <view class ="msg02-1" hover-class="msg02-2">
        <text class="text1"> 周六</text>
        <text class="text2">07</text>
      </view>
    </view>
    <view class ="msg03">
      <view class = "msg03-1"  hover-class="msg03-2" >
        <text class="text1"> 周日</text>
        <text class="text2">08</text>
      </view>
      <view class ="msg03-1"  hover-class="msg03-2">
        <text class="text1"> 周一</text>
        <text class="text2">09</text>
      </view>
      <view class ="msg03-1" hover-class="msg03-2">
        <text class="text1"> 周二</text>
        <text class="text2">10</text>
      </view>
      <view class ="msg03-1"hover-class="msg03-2" >
        <text class="text1"> 周三</text>
        <text class="text2">11</text>
      </view>
      <view class ="msg03-1" hover-class="msg03-2">
        <text class="text1"> 周四</text>
        <text class="text2">12</text>
      </view>
      <view class ="msg03-1" hover-class="msg03-2">
        <text class="text1"> 周五</text>
        <text class="text2">13</text>
      </view>
      <view class ="msg03-1" hover-class="msg03-2">
        <text class="text1"> 周六</text>
        <text class="text2">14</text>
      </view>
    </view>

  </view>
  <view class = "msg-2">
    <text>选择入园时段</text>
  </view>
  <view class="msg-3">
    <view class="msg-3-1">
      <view class="msg-3-2" >
        <text>09:00-11:00 ｜已约满</text>
      </view>
      <view class="msg-3-2" >
        <text>11:00-13:30 ｜已约满</text>
      </view>
    </view>
    <view class="msg-3-2" hover-class="msg03-2">
      <text>13:30-16:00 ｜余 4</text>
    </view>
  </view>
  <navigator url="../infoSubject/infoSubject">
    <button class="button01">
      <text>
        时段确认
      </text>
    </button>
  </navigator>
</template>

<script setup>


</script>

<style>
.msg-1{
  display: flex;
  flex-direction: row;
}
.msg-1-1{
  width: 59px;
  height: 21px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
  justify-content: flex-end;
  margin-left: auto
}
.msg-2{
  width: 90px;
  height: 21px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
  margin-top: 30rpx;
}
.msg01{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
  background: #FFFFFF;
  border-radius: 12px;
  margin-top: 30rpx;
}
.msg02-1{
  display: flex;
  flex-direction: column;
  width: 42px;
  height: 64px;
  background: #F5F5F5;
  border-radius: 4px;
  margin-left: 12rpx;
  margin-top: 10rpx

}
 .msg02-2{
  background-color: #8DCB6D;
 
}
.msg03-2{
  background-color: #8DCB6D !important
}
.msg02{
  display: flex;
  flex-direction: row;
   margin-left: 4%;
}

.msg03{
  display: flex;
  flex-direction: row;
  margin-top: 10%;
  margin-left: 4%;
}
.msg03-1{
  display: flex;
  flex-direction: column;
  width: 42px;
  height: 64px;
  background: #F5F5F5;
  border-radius: 4px;
  margin-left: 12rpx;
  margin-top: 5rpx
}
.msg-3{
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 12px;
  margin-top: 20rpx;

}
.msg-3-1{
  display: flex;
  flex-direction: row;
}
.msg-3-2{
  width: 160px;
  height: 27px;
  background: #F5F5F5;
  border-radius: 2px;
  margin-left: 40rpx;
  margin-top: 20rpx
}
.button01{
  width: 351px;
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
  margin-top: 60%;
}
.text1{
  width: 20px;
  height: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 10px;
  color: #000000;
  letter-spacing: 0;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
.text2{
  width: 16px;
  height: 21px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
  margin-top: 10rpx;
  margin-left: 25rpx;
}
</style>
